<template>
	<div class="back2top" @click="back2top"></div>
</template>

<script>
	export default {
		name: 'back-top',
        methods: {
		    back2top(){
                this.$emit('back2top');
            }
        }
	}
</script>

<style lang="scss" scoped>

    @keyframes back2top {
        0%{
            transform: rotate(0deg);
        }
        50%{
            transform: rotate(-5deg);
        }
        100%{
            transform: rotate(0deg);
        }
    }
    
    .back2top{
        width: 90px;
        height: 60px;
        margin: 70px auto 100px;
        cursor: pointer;
        background: url("/static/images/back2top.png") 0 0 no-repeat;
        transition: all .8s;
        transform-origin: center bottom;
        animation: back2top 2.4s infinite;
        @include hover{
            animation-play-state: paused;
        }
    }
    
</style>
